<template>
  <lt-drawer ref="ltDrawerRef" :height="windowHeight" position="bottom">
    <!--  头部  -->
    <div class="w-full h-full lt-drawer">
      <div class="flex justify-between p-2 px-4 cursor-pointer" @click="close">
        <div :style="borderStyle" class="border rounded px-3 py-1 icon-item">
          <span class="iconfont icon-xiangxiajiantou"></span>
        </div>
        <div class="w-35 flex justify-between">
          <div :style="borderStyle" class="border rounded px-3 py-1 cursor-pointer">
            <i class="header_icon iconfont icon-chuangkou" @click="ipcRender('window-change')"></i>
          </div>
          <div :style="borderStyle" class="border rounded px-3 py-1 cursor-pointer">
            <i class="header_icon iconfont icon-zuixiaohua" @click="ipcRender('window-min')"></i>
          </div>
          <div :style="borderStyle" class="border rounded px-3 py-1 cursor-pointer">
            <i class="header_icon iconfont icon-guanbi" @click="ipcRender('window-close')"></i>
          </div>
        </div>
      </div>
    </div>
    <!--  主体  -->
    <div class="flex">
      <div class="flex-2"></div>
      <div class="flex-3"></div>
    </div>
  </lt-drawer>
</template>
<script setup>
import ltDrawer from '../../../base-ui/lt-drawer/lt-drawer.vue'
import { toRGBA } from '../../../utils/common-fn'
import { ref, useTemplateRef, onMounted, computed } from 'vue'

const ltDrawerRef = useTemplateRef('ltDrawerRef')

onMounted(() => {
  window.addEventListener('resize', () => {
    windowHeight.value = window.innerHeight
  })
})

const borderStyle = computed(() => {
  const rootStyles = getComputedStyle(document.documentElement)
  const primaryColor = rootStyles.getPropertyValue('--playBg').trim()
  console.log(toRGBA(primaryColor, 0.3))
  return ` border: 1px solid ${toRGBA(primaryColor, 0.3)}`
})

const windowHeight = ref(0)
const open = () => {
  windowHeight.value = window.innerHeight
  ltDrawerRef.value.open()
}
const close = () => {
  ltDrawerRef.value.close()
}

const ipcRender = (type, params) => {
  window.electron.ipcRenderer.send(type, params)
}

defineExpose({
  open,
  close
})
</script>

<style scoped>
.lt-drawer {
  background: linear-gradient(var(--active) 60, var(--contentBg));
}
</style>
